<template>
  <div class="container">
    <div class="app-container" v-loading="loading">
      <!-- 放置按钮 -->
      <el-button type="primary" @click="addPermission('0',1)">添加权限</el-button>
      <!-- 放置表格组件 -->
      <el-table
      v-if="permissionList.length>0"
      stripe
      :data="permissionList"
      row-key="id"
      default-expand-all
      >
        <el-table-column align="center" prop="name" label="名称">

        </el-table-column>
        <el-table-column align="center" prop="code" label="标识">

        </el-table-column>
        <el-table-column align="center" prop="description" label="描述">

        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="{row}">
            <el-button v-if="row.type===1" type="text" @click="addPermission(row.id,2)">添加</el-button>
            <el-button type="text" @click="editPermission(row.id)">编辑</el-button>
            <!-- 气泡确认框 -->
            <el-popconfirm
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="确定删除吗？"
            @onConfirm="delPermission(row.id)"
            >
            <el-button slot="reference" style="margin-left:10px;" type="text">删除</el-button>
            </el-popconfirm>
            
          </template>
        </el-table-column>
      </el-table>
      <!-- 无数据显示空状态(vue2中没有空状态组件) -->
        <div v-else class="empty-state">
        <i class="el-icon-document"></i>
        <p>暂无数据</p>
        </div>
    </div>
    <!-- 放置弹层组件 -->
    <!-- vue2中使用sync修饰符实现父子组件数据双向绑定,表示会接受子组件的事件,并将子组件的值传给父组件的showDialog-->
    <!-- ref 可以获取dom实例对象，在vue2中也可以获取组件实例（包括自定义组件） -->
    <AddPermission
    
    ref="AddPermission"
    :showDialog.sync="showDialog"
    :showTitle="showTitle"
    :permissionId="permissionId" 
    :permissionType="permissionType"
    @updatePermission="getPermissionLists()"
    ></AddPermission>
  </div>
</template>
<script>
import {Message} from 'element-ui'
import {getPermissionList,deletePermission} from '@/api/permission'
import {transListToTreeData} from '@/utils'
import AddPermission from './components/AddPermission.vue'
export default {
  name: 'Permission',
  components:{
    AddPermission
  },
  created(){
    // 调用接口获取数据
    this.getPermissionLists()
  },
  data(){
    return {
      showDialog:false,//控制弹层显示和隐藏
      loading:false,//控制数据加载状态
      permissionList:[],// 权限列表数据初始化
      permissionId:'',//权限点id
      permissionType:null,//权限点类型
      showTitle:''//不同场景下的标题
    }

  },
  methods:{
    // 获取权限列表数据
    async getPermissionLists(){
      this.loading=true//获取数据前开启加载
      const result=await getPermissionList()
      // console.log(result);
      // 将列表数据转化成树形结构
      const resList=transListToTreeData(result,0)
      // console.log(resList);
      // 将转化完成的数据进行赋值初始化
      this.permissionList=resList

      //获取数据后关闭加载  
      this.loading=false
    },
    // 添加权限（type=1：“添加一级权限”  type=2：“添加二级权限”）
    addPermission(pid,type){
      // console.log(pid,type);
      this.showDialog=true
      this.permissionId=pid
      this.permissionType=type
      this.showTitle='添加权限'
    },
    // 编辑权限,点击编辑调用子组件中getPermissionDetails方法进行子组件表单数据回显
    editPermission(id){
      // console.log(id);
      this.showDialog=true
      this.permissionId=id
      this.showTitle='编辑权限'
      // 在子组件获取数据，父组件通过refs调用子组件的方法来获取,让子组件表单数据进行回显
      // 注意：由于props是异步，所以需要等props更新完成才能有最新的id，不然就是null，拿不到数据，可以将下面代码包裹在$nextTick()中，这样就是等props更新完再执行后面的逻辑
      this.$nextTick(()=>{
        // 将同步方法包裹在其中，方便与异步方法执行正确的逻辑
        this.$refs.AddPermission.getPermissionDetails()
      })
      
      
    },
    // 删除权限
    async delPermission(id){
      // console.log(id);
      await deletePermission(id)
      // 删除成功后，提示用户
      Message.success('删除成功')
      // 重新加载渲染页面
      this.getPermissionLists() 
    }
  }
}
</script>

<style scoped>
.app-container{
  padding: 10px;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; /* 固定高度，或使用 100% */
  color: #999;
  font-size: 16px;
  text-align: center;
}
.empty-state i {
  font-size: 60px;
  margin-bottom: 10px;
  color: #ccc;
}
.empty-state p {
  margin: 0;
  font-size: 16px;
}
</style>
